<template>
  <!-- 颜色列表 -->
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <u-list class="ulist" @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in specList" :key="index">
        <u-row customStyle="margin: 10px 0;">
          <u-col span="0.5"> </u-col>
          <u-col span="10">
            <view>
              <view class="m-t-20 font-size30 flex">
                {{ index }}. &nbsp;{{ item.spec }}
              </view>
            </view>
          </u-col>
          <u-col span="1">
            <clIcon @click="iconClick(item, index)" class="w100 flex flex-aifs" type="icon-shanchu" color="#000" size="20"></clIcon>
          </u-col>
        </u-row>
        <u-gap bgColor="#eee" height="5"></u-gap>
      </u-list-item>
    </u-list>
    <u-modal :show="expenseTypeShow" :title="title" @cancel="close" @confirm="addData"
      :showCancelButton="showCancelButton" confirmText="保存">
      <u--input placeholder="请输入规格内容" border="surround" v-model="obj.spec"></u--input>
      <view class="flex m-t-40 m-b-40">
        默认<u-switch class="m-l-10 m-r-10" v-model="obj.isDefault"></u-switch>
        启用<u-switch class="m-l-10 m-r-10" v-model="obj.isEnable"></u-switch>
      </view>
      <u--input placeholder="请输入备注" border="surround" v-model="obj.remarks"></u--input>
    </u-modal>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      obj: {
        spec: '',
        isDefault: false,
        isEnable: false,
        remarks: '',
      },
      specList: [],
      config: {
        title: "规格信息",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      showCancelButton: true,
      title: "类别",
      expenseTypeShow: false,
      typeValue: null,
    };
  },
  // 页面周期函数--监听页面加载
  onLoad(option) {
    console.log("option", option);
    if (option.item) {
      this.specList = option.item
    }
  },
  methods: {
    iconClick(item, index) {
      const arr = JSON.parse(JSON.stringify(this.specList))
      arr.splice(index, 1)
      this.specList = arr
    },
    close() {
      this.expenseTypeShow = false;
      this.obj = {
        spec: '',
        isDefault: false,
        isEnable: false,
        remarks: '',
      }
    },
    addData() {
      this.specList.push(this.obj)
      this.close()
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.expenseTypeShow = true
      }
    },
    scrolltolower(e) {
      // 到底了
    },
  },
  beforeDestroy() {
    const e = {
      type: 3,
      data: this.specList || []
    }
    uni.$emit('on-pdcl-arr', e)

  },
};
</script>

<style lang="scss" scoped>
.ulist {
  position: absolute;
  top: 5%;
}

/deep/ .u-modal__content {
  display: block;
}
</style>
